<template>
  <div class="home-box">
    <el-card class="box-card" shadow="never">
      <div class="search-box" style="overflow: hidden">
        <div class="search-left">
          <el-icon>
            <Search />
          </el-icon>
          <span>筛选搜索</span>
        </div>

        <div class="search-right">
          <!-- <el-button @click="resetFun" class="reset-btn">
            <span>重置</span>
          </el-button> -->
          <el-button type="primary" @click="getHomeTongjiFun" class="el-button">
            <span>查询结果</span>
          </el-button>
        </div>
      </div>

      <el-form :model="search" ref="searchForm" label-width="100px" class="search-form" style="overflow-x: auto">
        <el-form-item label="日期:" prop="dateTime">
          <el-date-picker v-model="search.dateTime" type="date" placeholder="选择一个日期" format="YYYY-MM-DD"
            value-format="YYYY-MM-DD" size="large" @change="getHomeTongjiFun" :clearable="false" />
        </el-form-item>

      </el-form>
    </el-card>
    <div class="tip-box">
      <div class="tip-item" v-for="(item, index) in tips" :key="index">
        <div class="label">{{ item.label }}</div>
        <div class="value">{{ item.value }}</div>
      </div>
    </div>
    <div class="chart-box">
      <div style="width: 100%; height: 300px"><v-chart v-loading="loadingMore" :option="chartsOpt" autoresize></v-chart>
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref, reactive } from 'vue'
import { getHomeTongji } from '@api/tongji/home'
import { getNowDate } from '@utils/date'
import { getBarChart } from '@components/common/echarts/options'
// 搜索
const search = ref({
  dateTime: getNowDate()
})
const searchForm = ref()

const resetFun = () => {
  search.value = {
    dateTime: ''
  }
}

const tips = ref([])

//获取列表
const loadingMore = ref(false)
const chartsOpt = ref()
const data = ref({
  order_price_count: '',
  today_order_count: '',
  shuji_count: ''
})
async function getHomeTongjiFun() {
  let { dateTime } = search.value
  console.log(dateTime)
  let searchOpt = {
    time: dateTime
  }
  let res = await getHomeTongji(searchOpt)
  let xAxis = []
  let seriesData = []
  let { order_price_count, today_order_count, shuji_count, hash } = res.data;

  if (today_order_count && today_order_count != '0') {
    xAxis = Object.keys(hash)

    seriesData = Object.values(hash)
  }
  data.value = res.data;
  tips.value = [
    {
      label: '总金额',
      value: order_price_count
    },
    {
      label: '订单总数',
      value: today_order_count
    },
    {
      label: '书籍总数',
      value: shuji_count
    }
  ]
  chartsOpt.value = getBarChart({ xAxis, seriesData, title: '各省书籍总数' })
}

onMounted(() => {
  getHomeTongjiFun()
})
</script>
<style lang="scss" scoped>
.home-box {
  .box-card {
    margin-bottom: 50px;
  }

  .tip-box {
    padding-left: 30px;
    margin-bottom: 40px;
    @include flex();

    .tip-item {
      @include flex();
      margin-right: 35px;

      .label {
        font-weight: 600;
        color: #676767;
        font-size: 14px;
        margin-right: 10px;
      }

      .value {
        color: #f44b3b;
        font-size: 14px;
      }
    }
  }
}
</style>
<style lang="scss">
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
</style>
